<template>
	<view class="wui-collapseItem">
		<view class="collapse-title" hover-stay-time="100" hover-class="collapse-title-hover" @click="changeCollapse">
			<view class="collapse-title-text">{{ title || '' }}</view>
			<view class="collapse-title-icon iconfont icon-wui-down" :class="[show ? 'collapse-title-icon-rotate' : 'collapse-title-icon-normal']"></view>
		</view>
		<view class="collapse-content" :style="[heightComputed]" :class="[show ? 'collapse-content-show' : 'collapse-content-hidd']">
			<view :id="'collapse-content-slot-' + name" class="collapse-content-slot"><slot></slot></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'w-collapseItem',
	props: {
		name: {
			type: [String, Number]
		},
		title: {
			type: String
		}
	},
	data() {
		return {
			show: false,
			height: 0,
			// 解释下这里为什么要用两个变量 parentValue变量是为了解决单个值（手风琴模式）  parentValueArr为普通模式
			parentValue: null,
			parentValueArr: []
		};
	},
	watch: {
		parentValueArr(val) {
			if (val && val.length) {
				this.show = val.includes(this.name);
			}
		},
		parentValue(val) {
			this.show = this.name === val;
		},

		show(val) {
			if (val) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('#collapse-content-slot-' + this.name)
						.boundingClientRect(data => {
							this.height = data.height;
						})
						.exec();
				});
			}
		}
	},
	computed: {
		heightComputed() {
			return {
				'--height': this.height + 'px'
			};
		}
	},
	methods: {
		getParent() {
			return this.$wuiUtils.queryParent.call(this, 'w-collapse');
		},
		setValue(parentValue) {
			this.parentValue = parentValue;
		},
		setValueArr(parentValueArr) {
			this.parentValueArr = parentValueArr;
		},
		changeCollapse() {
			if (this.getParent()) {
				let parentVaule = this.getParent().value;
				// 有w-collapse组件包裹
				if (parentVaule instanceof Array) {
					let cloneParentVaule = [].concat(parentVaule);
					let indexOf = cloneParentVaule.indexOf(this.name);
					if (indexOf === -1) cloneParentVaule.push(this.name);
					else cloneParentVaule.splice(indexOf, 1);
					this.getParent().changeValue(cloneParentVaule);
				} else {
					this.getParent().changeValue(this.name);
				}
			}
			this.show = !this.show;
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-collapseItem {
	.collapse-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 90rpx;
		padding: 0 20rpx;
		.collapse-title-text {
			flex: 1;
			color: #323233;
		}
		.collapse-title-icon {
			width: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #969799;
			transition: transform 0.4s;
		}
		.collapse-title-icon-normal {
			transform: rotate(0);
		}
		.collapse-title-icon-rotate {
			transform: rotate(-180deg);
		}
	}
	.collapse-title-hover {
		background-color: #f6f7f8;
	}
	.collapse-content {
		overflow: hidden;
		transition: height 0.4s;
		.collapse-content-slot {
			padding: 20rpx;
		}
	}

	.collapse-content-show {
		height: var(--height);
	}
	.collapse-content-hidd {
		height: 0;
	}
}
</style>
